<template>
  <view class="StuRecordDeatil">
    <uni-forms ref="form" label-width="240rpx" label-align="right">
      <uni-forms-item required label="加减分操作" name="">
        <radio-group @change="radioChangeHandler">
          <label class="radio">
            <radio :value="0" :checked="formData.scoreType == 0" />
            <text style="color: #09bb07"> 加分</text>
          </label>
          <label class="radio">
            <radio :value="1" color="red" :checked="formData.scoreType == 1" />
            <text style="color: red"> 减分</text>
          </label>
          <label class="radio">
            <radio
              :value="2"
              color="#ccc"
              :checked="formData.scoreType == 2"
            />
            <text style="color: #ccc"> 不加不减</text>
          </label>
        </radio-group>
      </uni-forms-item>
      <uni-forms-item
        v-if="formData.scoreType != 2"
        required
        label="加减分分数(0~20)"
        name=""
      >
        <uni-number-box :min="0" :max="20" v-model="formData.score" />
      </uni-forms-item>
      <uni-forms-item v-if="formData.scoreType != 2" label="原因" name="">
        <uni-easyinput
          v-model="formData.comment"
          type="textarea"
          placeholder="请填写加减分原因"
        />
      </uni-forms-item>
    </uni-forms>
    <button  @click="submitHandler" type="primary">{{ isEdit?'修改':'提交'}}</button>
  </view>
    <MessageBoard @send="leaveWordHandler" v-if="isEdit" :leaveWordList="formData.leaveWordList" >
    
    </MessageBoard>
</template>

<script setup>
import { getRecordDetailByIdAndStuId } from "@/api/courseApi";
import { postRecordWithStu } from "@/api/teacherApi";
import { getLeaveWordByRecordStuId, leaveWord } from "@/api/userApi";
import { onLoad } from "@dcloudio/uni-app";
import MessageBoard from "../components/MessageBoard.vue"

const prop = defineProps(["stuId", "rId"]);
const formData = ref({
  id:"",
  score: 0,
  scoreType: 0,
  comment: "",
  leaveWordList:[]
});
const isEdit = ref(false);
const getRecordData = () => {
  getRecordDetailByIdAndStuId({
    recordId: prop.rId,
    stuId: prop.stuId,
  }).then((res) => {
    if (res.data != null) {
      formData.value = res.data;
      isEdit.value = true;
    } else {
      isEdit.value = false;
    }
  });
};
const leaveWordHandler=(val)=>{
   if(!val){
    msgError("请先输入内容")
  }
  const data={
    studentRecordId:formData.value.id,
    content:val,
  }
  
  leaveWord(data).then(res=>{
    msgSuccess("发送成功")
    getLeaveWordByRecordStuId({id:formData.value.id}).then(res=>{
      if(Array.isArray(res.data)){
        formData.value.leaveWordList=res.data
      }
    })
    
  }).catch(err=>{
    msgError("发送失败")
  })
}
const radioChangeHandler = (e) => {
  
  formData.value.scoreType = e.detail.value;
};
const submitHandler = () => {
  const data={
    ...formData.value,
    recordId:prop.rId,
    studentId:prop.stuId

  }
postRecordWithStu(data).then(res=>{
 isEdit.value?msgSuccess("提交成功"):msgSuccess("修改成功")
  
  getRecordData()
}).catch(err=>{
  isEdit.value?msgSuccess("提交失败"):msgSuccess("修改失败")
})

};
onLoad(()=>{
  getRecordData()
})
</script>

<style scoped>
.StuRecordDeatil {
  padding: 30rpx 20rpx;
}
.radio {
  margin-right: 30rpx;
}
</style>
